<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${soft.softName} + ' - 向日葵下载'">软件详情</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}">
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="container">
    <div class="breadcrumb">
        当前位置：首页 > 工具详情
    </div>

    <div class="tool-detail">
        <div class="tool-header">
            <div class="tool-icon">
                <img th:src="${soft.icon}" th:alt="${soft.softName} + '图标'">
            </div>
            <div class="tool-info">
                <h1 th:text="${soft.softName}">软件名称</h1>
                <div class="tool-meta">
                    版本：<span th:text="${soft.version}">版本号</span> |
                    大小：<span th:text="${soft.size}">大小</span> |
                    更新：<span th:text="${#dates.format(soft.updateTime, 'yyyy-MM-dd')}">更新时间</span>
                </div>
                <div class="tool-meta">
                    适用平台：<span th:text="${soft.platform}">平台</span>
                </div>
                <a th:href="@{/download/{id}(id=${soft.id})}" class="download-btn">立即下载</a>
            </div>
        </div>

        <div class="tool-content">
            <h2>工具介绍</h2>
            <p th:text="${soft.description}">软件描述</p>

            <h2>功能特点</h2>
            <ul>
                <li th:each="feature : ${soft.features}" th:text="${feature}">功能特点</li>
            </ul>

            <h2>安装说明</h2>
            <ol>
                <li th:each="step : ${soft.installGuide}" th:text="${step}">安装步骤</li>
            </ol>
        </div>
    </div>
</div>
</body>
</html>
